import React from 'react';
import PropTypes from 'prop-types';
import cn from 'classnames';
import s from './SecurityRating.module.css';
import Dialog from '@knownsec/react-component/dist/Dialog';
import Button from '@knownsec/react-component/dist/Button';
import * as echarts from 'echarts';
const securityLevel = score => {
	const score_ = isNaN(score) ? score : 100 - score;
	if (score === 100) {
		return {
			level: '安全',
			color: '#e9fced ',
			colorT: '#11AB4E ',
		};
	} else if (score >= 75) {
		return {
			level: '低危',
			color: '#fffae4 ',
			colorT: '#ffe579 ',
		};
	} else if (score >= 50) {
		return {
			level: '中危',
			color: '#feebe3 ',
			colorT: '#ff8f55 ',
		};
	} else if (score >= 25) {
		return {
			level: '高危',
			color: '#ff3b46 ',
			colorT: '#ffe3e2 ',
		};
	} else if (score > 0) {
		return {
			level: '严重',
			color: '#fde2e1 ',
			colorT: '#ee4a4b ',
		};
	} else {
		return {
			level: '未知',
			color: '#f4f4f4',
			colorT: '#a6a6a6 ',
		};
	}
};
export default function SecurityRating({ className, score, showTips = false }) {
	const { color, colorT, level } = securityLevel(score);
	const [visible, setVisible] = React.useState(false);
	const handleClose = () => {
		setVisible(false);
	};
	React.useEffect(() => {
		var getvalue = isNaN(score) ? '- -' : 100 - score;
		const option = {
			series: [
				// 刻度
				{
					name: '外部刻度',
					type: 'gauge',
					radius: '64%',
					min: 0, // 最小刻度
					max: 100, // 最大刻度
					splitNumber: 10, // 刻度数量
					startAngle: 200,
					endAngle: -20,
					axisLine: {
						show: false,
						lineStyle: {
							width: 1,
							color: [[1, 'rgba(0,0,0,0)']],
						},
					},
					// 刻度标签。
					axisTick: {
						show: true,
						splitNumber: 5,
						lineStyle: {
							color: '#C7CBCF', // 用颜色渐变函数不起作用
							width: 2,
						},
						length: 4,
					},
					axisLabel: { show: false },
					// 长刻度样式
					splitLine: {
						show: true,
						length: 8,
						lineStyle: {
							color: '#C7CBCF', // 用颜色渐变函数不起作用
						},
					}, // 分隔线样式
				},
				// 外圈及指针
				{
					type: 'gauge',
					startAngle: 200,
					endAngle: -20,
					splitLine: {
						show: false,
					},
					axisLabel: {
						show: false,
					},
					splitLabel: {
						show: false,
					},
					axisTick: {
						show: false,
					},
					axisLine: {
						show: true,
						lineStyle: {
							color: isNaN(score) ? [
								[0.25, '#D8D8D8'],
								[0.5, '#D8D8D8'],
								[0.75, '#D8D8D8'],
								[1, '#D8D8D8']
							] : [
								[0.25, '#FCD94A'],
								[0.5, '#F18246'],
								[0.75, '#ED3833'],
								[1, '#D5342F'],
								// [0.25, '#D5342F'],
								// [0.5, '#ED3833'],
								// [0.75, '#F18246'],
								// [1, '#FCD94A'],
							],
							width: 10,
						},
					},
					pointer: {
						// 分隔线
						shadowColor: 'auto', // 默认透明
						shadowBlur: 5,
						length: '50%',
						width: 1,
					},
					itemStyle: {
						borderColor: '#D8D8D8',
						borderWidth: 3,
					},
					detail: {
						formatter: getvalue,
						color: 'rgba(57, 7, 7, 1)',
						fontSize: 20,
					},
					data: [
						{
							value: getvalue,
						},
					],
				},
				// 指针环
				{
					// 指针外环
					type: 'pie',
					hoverAnimation: false,
					legendHoverLink: false,
					radius: ['4%', '8%'],
					z: 10,
					label: {
						normal: {
							show: false,
						},
					},
					labelLine: {
						normal: {
							show: false,
						},
					},
					data: [
						{
							value: 100,
							itemStyle: {
								normal: {
									color: '#D8D8D8',
								},
							},
						},
					],
				},
				{
					type: 'pie',
					hoverAnimation: false,
					legendHoverLink: false,
					radius: ['0%', '5%'],
					z: 10,
					label: {
						normal: {
							show: false,
						},
					},
					labelLine: {
						normal: {
							show: false,
						},
					},
					data: [
						{
							value: 100,
							itemStyle: {
								normal: {
									color: '#FFFFFF',
								},
							},
						},
					],
				},
			],
		};
		const chart = echarts.init(document.getElementById('chart'));
		chart.setOption(option, true);
		chart.resize();
	}, [score]);
	return (
		<div className={cn(className, s.securityRating)}>
			<span className={s.rule} onClick={() => setVisible(true)}>
				查看评分细则
			</span>
			<div className={s.descWapper}>
				<div className={s.title}>风险值</div>
				<div id="chart" style={{ width: '13.5rem', height: '13.5rem' }}></div>
				<div className={s.circle}>
					<div className={s.text2} style={{ background: color }}>
						<span style={{ color: colorT }}>{level}</span>
					</div>
				</div>
			</div>
			<Dialog
				visible={visible}
				title="评分细则"
				className={s.w780}
				onhide={handleClose}
				cancelText=""
				confirmText="关闭"
			>
				<div className={s.table}>
					<div>
						<div className={s.smalltit}>评分明细：</div>
						<div>
							<div className={s.head}>
								<span>风险值范围</span>
								<span>风险等级</span>
								<span>分值说明</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`75<风险值<=100`}</span>
								<span>严重</span>
								<span>您的资产整体风险严重，建议您尽快加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`50<风险值<=75`}</span>
								<span>高危</span>
								<span>您的资产整体风险高，建议您加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`25<风险值<=50`}</span>
								<span>中危</span>
								<span>您的资产整体风险较高，建议您加固防护体系。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>{`0<风险值<=25`}</span>
								<span>低危</span>
								<span>您的资产整体风险较低，请持续关注。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>0</span>
								<span>安全</span>
								<span>您的资产安全状态良好，请持续关注。</span>
							</div>
							<div className={cn(s.head, s.body)}>
								<span>- -</span>
								<span>未知</span>
								<span>您的资产安全处于未知状态。</span>
							</div>
						</div>
					</div>
					<div>
						<div className={s.loseDetail}>评分规则：</div>
						<div className={s.fs12}>
							<div>1. 所有的风险结果均为一个结果记1分。</div>
							<div>
								2.
								风险值根据风险结果中风险等级最高的来计算基础分值，即若存在高危风险结果，则风险值将从高危所对应的最低分值开始计算。
							</div>
							<div>
								3.
								一旦根据最高等级的风险结果计算基础分值后，将不再重复计算该等级以下的情况。
							</div>
							<div>
								4.
								风险值累加只能加到对应等级的最高分值，即若只有中危，则风险值最多能到中危。
							</div>
						</div>
					</div>
					{showTips && (
						<div className={s.info}>
							说明：评分对象为Web安全监测和主机安全监测两部分，可用性监测和IPv6合规监测因不涉及网络资产安全，故不参与分数评定。
						</div>
					)}
				</div>
			</Dialog>
		</div>
	);
}

SecurityRating.propTypes = {
	className: PropTypes.string,
	score: PropTypes.any,
};

SecurityRating.defaultProps = {
	className: s.securityRating,
};
